var data_x, data_y;
var data;
//登陆验证

// window.alert('别点我！')
get_btn = document.querySelector('#get_btn')

$('#get_btn').click(function () {

    $.ajax({
        url: "/api/kline_data",
        type: "get",
        data: {
            start_date: $("#start_date").val(),
            end_date: $("#end_date").val(),
            // username: $("#username").textContent,
            // password: $("#password").val(),
            // valid_code: $("#valid_code").val(),
            // csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),
        },
        success: function (resp) {
            data_x = resp.data_x;
            data_y = resp.data_y;

            var myChart = echarts.init(document.querySelector('#kline1'),'dark');

            option = {
                title: {
                text: '阿里巴巴2021年K线-自己'
                },
                xAxis: {
                    data: data_x,
                    silent: false
                },
                yAxis: {
                    // offset:-200
                    axisLine: {
                        linestyle: {
                            width: 10
                        }
                    },
                    splitNumber: 20,
                    scale: true,
                    silent: false
                    // z:100
                },
                dataZoom: [
                {
                    show: true,
                    type: 'slider',
                    top: '90%',
                    start: 0,
                    end: 100
                }
            ],
                series: [{
                    type: 'k',
                    data: data_y,
                    legendHoverLink: true,
                    hoverAnimation: true,
                    dimensions: ['date', 'open', 'close', 'highest', 'lowest'],
                    encode: {
                        x: 'date',
                        y: ['open', 'close', 'highest', 'lowest']
                    },
                    animationDuration: 1000,
                    itemStyle: {
                        normal: {
                            color: '#06B800',
                            color0: '#FA0000',
                            borderColor: null,
                            borderColor0: null
                        }
                    },
                    tooltip: {
                        formatter: function (param) {
                            param = param[0];
                            return [
                                'Date: ' + param.name + '<hr size=1 style="margin: 3px 0">',
                                'Open: ' + param.data[0] + '<br/>',
                                'Close: ' + param.data[1] + '<br/>',
                                'Lowest: ' + param.data[2] + '<br/>',
                                'Highest: ' + param.data[3] + '<br/>'
                            ].join('');
                        }
                    },
                }],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    },
                    backgroundColor: 'rgba(255, 255, 255, 0.8)',
                    position: function (pos, params, el, elRect, size) {
                        var obj = {top: 10};
                        obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
                        return obj;
                    },
                    extraCssText: 'width: 170px'
                },
                axisPointer: {
                    link: {xAxisIndex: 'all'},
                    label: {
                        backgroundColor: '#777'
                    }
                },
                toolbox: {
                    feature: {
                        dataZoom: {
                            yAxisIndex: false
                        },
                        brush: {
                            type: ['lineX', 'clear']
                        }
                    }
                },
                brush: {
                    xAxisIndex: 'all',
                    brushLink: 'all',
                    outOfBrush: {
                        colorAlpha: 0.1
                    }
                },
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

        }
    })


})




